<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { userLogin } from '@/api';
import { showSuccess, showError, showWarning } from '@/utils/message';

const router = useRouter();

// 响应式数据
const username = ref('');
const password = ref('');
const isLoading = ref(false);

// 处理登录
const handleLogin = async () => {
  // 验证输入
  if (!username.value.trim() || !password.value.trim()) {
    showWarning('请输入用户名和密码');
    return;
  }

  try {
    isLoading.value = true;
    
    // 调用登录接口
    const response = await userLogin({
      name: username.value.trim(),
      passWord: password.value.trim()
    });

    // 检查登录结果
    if (response.code === 200) {
      // 登录成功
      showSuccess('登录成功！');
      
      // 可以在这里保存用户信息到本地存储
      localStorage.setItem('userInfo', JSON.stringify({
        username: username.value,
        loginTime: new Date().toISOString()
      }));
      
      // 跳转到登录后的首页
      router.push('/visitorLoginHome');
    } else {
      // 登录失败
      showError(response.msg || '登录失败，请检查用户名和密码');
    }
  } catch (error) {
    console.error('登录错误:', error);
    showError('网络错误，请稍后重试');
  } finally {
    isLoading.value = false;
  }
};
</script>

<template>
  <div class="visitor-login-container-box">
    <div class="visitor-login-container">
      <h2>游客登录</h2>
      <form @submit.prevent="handleLogin">
        <div>
          <label>账号：</label>
          <input 
            v-model="username" 
            type="text" 
            placeholder="请输入用户名"
            :disabled="isLoading"
            required 
          />
        </div>
        <div>
          <label>密码：</label>
          <input 
            v-model="password" 
            type="password" 
            placeholder="请输入密码"
            :disabled="isLoading"
            required 
          />
        </div>
        <button 
          type="submit" 
          class="cta-button-visitor"
          :disabled="isLoading"
        >
          {{ isLoading ? '登录中...' : '登录' }}
        </button>
      </form>
      <p>抱歉,游客登录功能正在开发中，请稍后再试...</p>
    </div>
  </div>
</template>

<style scoped lang="less">
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.visitor-login-container-box {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  width: 100vw; /* 调整为视窗宽度 */
  height: 78.6vh;
  background-image: url("https://res.volccdn.com/obj/volc-console-fe/vconsole-static/auth.coze-bg-20250529.f88b4dc9.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 10px;

  .visitor-login-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 440px;
    height: 450px;
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    padding: 40px 30px;
    transition: all 0.3s ease-in-out;

    h2{
      font-size: 24px;
      font-weight: bold;
      color: #333;
      margin-bottom: 20px;
      text-align: center;
      width: 100%;
    }

    form{
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 20px;

      div {
        display: flex;
        flex-direction: column;
        width: 100%;
      }

      label {
        font-size: 14px;
        margin-bottom: 6px;
        color: #555;
      }

      input {
        padding: 10px 12px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 6px;
        transition: border-color 0.3s ease;
        width: 100%;
      }

      input:focus {
        border-color: #007BFF;
        outline: none;
      }

      input:disabled {
        background-color: #f5f5f5;
        cursor: not-allowed;
      }

      .cta-button-visitor{
        padding: 12px;
        background-color: #007BFF;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .cta-button-visitor:hover:not(:disabled) {
        background-color: #0056b3;
        transform: translateY(-1px);
      }

      .cta-button-visitor:disabled {
        background-color: #6c757d;
        cursor: not-allowed;
        transform: none;
      }
    }

    p{
      margin-top: 20px;
      font-size: 14px;
      color: #666;
      text-align: center;

      .cta-button-visitor-login{
        color: #007BFF;
        text-decoration: none;
        font-weight: bold;
        margin: 0 3px;
      }

      .cta-button-visitor-login:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>